ul, li {

  margin: 0;

  padding: 0;

  list-style: none;

}

#logo {

  position: absolute;

  top: 20px;

  left: 50px;

}



#logo img {

  width: 205px;

  height: auto;

}



#main {

  position: absolute;

  left: 0;

  top: 0;

  width: 1280px;

  height: 720px;
  
  z-index: 0;

}



#main.scroll {

  background-position: 0 -720px;

}







.box-shadow-inset {

  -webkit-box-shadow: 1px 1px 8px rgba(255, 255, 255, .71) inset, -1px -1px 8px rgba(255, 255, 255, .71) inset;

  box-shadow: 1px 1px 8px rgba(255, 255, 255, .71) inset, -1px -1px 8px rgba(255, 255, 255, .71) inset;

}



img {

  display: block;

  height: 100%;

  width: 100%;

  border-radius: 12px;

}



#more-container {

  height: 630px;

  overflow: hidden;

}





.focus {

  transform:scale(1.1);
  -ms-transform:scale(1.1); 
  -moz-transform:scale(1.1);
  -webkit-transform:scale(1.1);  
  -o-transform:scale(1.1);  

  border: 4px solid #fff !important;

  margin-top: -4px;

  margin-left: -4px;

  transform-origin: center center;

  z-index: 1000;

  animation: all 0.5s;

  box-shadow: none !important;

  border-radius: 15px;

}

.smallResolution {
  position: absolute;
  top: 50px;
  width: 150px;
  height: 70px;
  left: 980px;
  font-size: 30px;
  color: #ebebeb;
  text-align: center;
  line-height: 70px;
  background: rgb(0, 0, 60);
  z-index: 2;
  display: none;
}

.video.focus {

  transform: scale(1) !important;

  -webkit-transform: scale(1) !important;

}

.video{

  background-color: transparent !important;

  background-image: none !important;

  background: transparent !important;
}



.border-radius {

  border-radius: 15px;

}



.oh {

  overflow: hidden;

}



.fl {

  float: left;

}



.scroll-default {

  position: relative;

  padding: 20px 0;

  left: 50px;

  width: 3000px;

}



.empty {

  font-size: 24px;

  color: #fff;

  width: 100%;

  padding-top: 50px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-align: center;

}



.dialog {

  position: absolute;

  left: 0;

  top: 0;

  width: 1280px;

  height: 720px;

  z-index: 1000;

  display: none;

}



.dialog-body {

  position: absolute;

  display: table;

  padding: 30px;

  height: 140px;

  width: 410px;

  top: 300px;

  left: 400px;

}

.dialog-container{

  display: table-cell;

  text-align: center;

  vertical-align: middle;

  font-size: 24px;

}





.flag{

  position: absolute;

  background: url(../images/flag_bg.png);

  height: 68px;

  width: 37px;

  right: 15px;

  top: 0;

}



.flag-free{

  background-position: 0 0;

}



.flag-subject{

  background-position: -37px 0;

}



.flag-activity{

  background-position: -74px 0;

}



.flag-game{

  background-position: -111px 0;

}



.flag-default {

  display: none;

}



.placeholder{

  background: url(../images/placeholder_bg.png) repeat;

}





#volume {

  position: absolute;

  top: 50%;

  right: 50px;

  margin-top: -100px;

  height: 100px;

  width: 10px;

  display: none;

  z-index: 1000;

  border-radius: 5px;

}



.volume-container {

  position: relative;

  height: 100px;

  border-radius: 5px;

  background: url(../images/controls/volum-bg.png) repeat;

  overflow: hidden;

}



#volume-bar {

  position: absolute;

  width: 100%;

  bottom: 0;

  height: 100%;

  background: #fff;

}



#volume img {

  position: absolute;

  width: 32px;

  height: 32px;

  bottom: -40px;

  left: -10px;

}



.full-play #logo,

.full-play #nav,

.full-play #search,

.full-play #main,

.full-play #series-container,

.full-play #series-list,

.full-play #video {

  display: none !important;

}



.full-play #my-play-list,

.full-play #bg-shadow.show,

.full-play #tips.show {

  display: block;

}





.full-play {

  background: transparent !important;

  background-image: none !important;

  /* background: none!important; */

}



/* 播放条、标题背景 */

#bg-shadow {

  position: absolute;

  display: none;

  overflow: hidden;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  background-image: url(../images/controls/bg-shadow.png);

  z-index: 1000;

}



#bg-shadow .title {

  position: absolute;

  top: 30px;

  right: 50px;

  left: 50px;

  font-size: 30px;

  color: #fff;

}







/* 提示 */

#tips {

  position: absolute !important;

  width: 450px !important;

  height: 50px !important;

  background: url(../images/controls/tips.png?v=1) !important;

  left: 50% !important;

  top: 580px !important;

  margin-left: -225px !important;

  display: none;

}



/* 时长进度条 */

.progress-bar {

  position: absolute;

  z-index: 100;

  top: 660px;

  left: 190px;

  width: 900px;

  height: 7px;

  background: url(../images/controls/bar-bg.png) repeat;

  border-radius: 3px;

  overflow: hidden;

}



/* 播放进度条 */

.play-progress-bar {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  background: #009cff;

  border-radius: 3px;

}





/* 视频时长 */

/* 当前播放时间 */

.duration,

.currenttime {

  position: absolute;

  top: 645px;

  height: 40px;

  line-height: 40px;

  font-size: 30px;

  color: #fff;

}



.duration {

  right: 50px;

}



.currenttime {

  left: 50px;

}



#my-play-list {

  position: absolute;

  right: -360px;

  top: 0;

  bottom: 0;

  width: 360px;

  background: url(../images/controls/vod-play-list-bg.png?v=2) repeat;

  z-index: 100;

}



#list-view {

  position: absolute;

  top: 60px;

  bottom: 60px;

  left: 0px;

  right: 0px;

  overflow: hidden;

}



#panel-container .table {

  margin-bottom: 20px;

  width: 100%;

  height: 60px;

  display: table;

  table-layout: fixed;

  /* position: relative; */

}



#panel-container .played .status {

  display: inline-block;

  width: 20px;

  height: 20px;

  background: url(../images/controls/playing.gif);

  margin-right: 5px;

}



#panel-container .focus {

  background: #009cff;

  border: 0 none!important;

  transform: scale(1);

  -webkit-transform: scale(1);

  margin-left: 0;

  margin-top: 0;

}



#panel-container .cell {

  display: table-cell;

  padding: 10px;

  height: 60px;

  vertical-align: middle;

}



.charge {

  font-size: 16px;

  margin: 5px 3px 0;

  padding: 2px 3px;

  background: red;

  color: #fff;

}



#panel-container .text {

  overflow: hidden;

  line-height: 30px;

  font-size: 18px;

  max-height: 60px;

  color: #fff;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  text-align: justify;

}





#pause,

#ffwd,

#fbwd {

  position: absolute;

  z-index: 100;

  display: none;

  width: 114px;

  height: 114px;

  left: 50%;

  top: 50%;

  margin-top: -57px;

  margin-left: -57px;

}



#pause {

  background: url(../images/controls/play.png);

}



#ffwd {

  background: url(../images/controls/ffwd.png);

}



#fbwd {

  background: url(../images/controls/fbwd.png);

}



#mute {

  position: absolute;

  right: 50px;

  top: 50px;

  z-index: 1000;

  display: none;

}



.video-mark{

  position: absolute;

  width: 92px;

  height: 92px;

  left: 50%;

  top: 50%;

  margin: -46px 0 0 -46px;

}



#test{

  position: absolute;
    color: red;
    background: yellow;
    font-size: 40px;
    left: 30px;
    right: 30px;
    top: 30px;
    word-break: break-all;

}



video {

  object-fit: fill;

}



.goods-item {

  position: absolute;

  width: 192px;

  height: 260px;

  padding: 10px;

  font-size: 20px;

  background: url(../images/placeholder_bg.png) repeat;

  border-radius: 15px;

  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

  color: #fff;

  overflow: hidden;

}

.goods-item .img-container{

  width: 100%;

  padding-top: 100%;

  position: relative;

  border-radius: 15px;

  overflow: hidden;

}

.goods-item img{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.goods-item .info-container{

  padding-top: 8px;

}

.goods-item .info-container .name,

.goods-item .info-container .price {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis; 

  height: 30px; 

  line-height: 30px;

}

.goods-item .color {

  color: #f60;

}

.goods-item.special {

  width: 454px;

  height: 280px;

  padding: 0;

  background: none;

}

.goods-item.special .img-container{

  padding: 0;

  height: 100%;

}

.goods-item.special .info-container{

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  padding: 0 20px;

  background: url(../images/mark_bg.png) repeat;

}

.goods-item.special .info-container .name{

  height: 50px;

  line-height: 50px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}





/* // unslider */

.dots {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  text-align: center;

}



.dots li {

  display: inline-block;

  width: 8px;

  height: 8px;

  margin: 0 5px;

  text-indent: -999em;

  border: 2px solid #fff;

  border-radius: 4px;

  opacity: .4;

}



.dots li.active {

  background: #fff;

  opacity: 1;

}
